<template>
  <div class="homeFood">
    <ul>
      <router-link to="/Read" :class="{'current-select':'/Read'===$route.path}" tag="li">
        <img src="../assets/movie.jpg" v-if="'/Read'!=$route.path">
        <img src="../assets/movie-xuanz.jpg" v-else>
        <a>阅读</a>
      </router-link>
      <router-link to="/Movie" :class="{'current-select':'/Movie'===$route.path}" tag="li">
        <img src="../assets/read.jpg" class="specialImg" v-if="'/Movie'!=$route.path">
        <img src="../assets/read-xuanz.jpg" class="specialImg" v-else>
        <a>电影</a>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HomeFood",
  data() {
    return {};
  },
  components: {}
};
</script>

<style scoped>
.homeFood {
  width: 100%;
  height: 0.53rem;
  background-color: #e5e5e5;
  position: fixed;
  bottom: 0;
  left: 0;
}
.homeFood > ul {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.homeFood > ul > li {
  display: flex;
  flex-direction: column;
  width: 0.5rem;
  height: 0.53rem;
  justify-content: space-around;
  align-items: center;
}
.homeFood > ul > li > img {
  width: 0.3rem;
}
.specialImg {
  width: 0.22rem;
}
a {
  font-size: 0.11rem;
  color: #666666;
}

.current-select > a {
  color: #1f4ba5;
}
</style>
